<template>
  <div class="home">
    <home></home>
    <h2>{{ title }}</h2>
    <button @click="changeTitle">修改了title</button>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
import Home from './Home.vue'
import { computed } from '@vue/reactivity'
export default {
  // provide: {
  //   name: 'why',
  //   age: 19,
  // },
  //函数写法
  provide() {
    return {
      name: 'why',
      age: 10,
      // title: this.title,
      title: computed(() => this.title)
    }
  },
  components: {
    Home,
  },
  data() {
    return {
      title: '我还是标题',
      counter: 0,
    }
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    },
    changeTitle() {
      this.title = '我是标题2'
    },
  },
}
</script>

<style scoped>
h2 {
  color: red;
}
</style>
